<route lang="json5">
{
  meta: {
    auth: true,
    label: '主窗口2',
  },
}
</route>

<style lang="scss" scoped>
$lineWeight: 3px;
.resize-line {
  @apply bg-gray-400;

  &.right,
  &.left {
    width: $lineWeight;
    height: 100%;
  }
  &.bottom,
  &.top {
    width: 100%;
    height: $lineWeight;
  }
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.action:hover {
  background: var(--color-fill-3);
}
</style>

<template>
  <div class="h-full flex flex-col items-start">
    <div class="flex items-center gap-x-4">
      <a-switch type="round" v-model="isOpen">
        <template #checked>接收中</template>
        <template #unchecked>拒收中</template>
      </a-switch>
      <a-input :style="{ width: '12rem' }" placeholder="NAME" size="small" :model-value="data.name" />
    </div>

    <div class="h-0 flex-1 w-full">
      <a-resize-box
        :directions="['right', 'bottom', 'top', 'left']"
        :class="['flex', ' max-w-full max-h-[calc(100%-52px)]', 'min-w-[12rem] min-h-[8rem]', ' my-2 h-60 ']"
        :style="{ width: '24rem' }"
      >
        <template #resize-trigger="{ direction }">
          <div class="resize-line" :class="direction" />
        </template>
        <div class="m-2 p-2 border w-full border-black border-dotted overflow-y-scroll" ref="messageBoxRef">
          <template v-for="item in messageList">
            <a-comment :author="item.name" :content="item.msg" datetime="just now">
              <template #actions>
                <a-button type="text" size="small" class="!mr-0">
                  <template #icon>
                    <Icon icon="tabler:heart-filled" :class="[item.heart ? 'text-red-500' : '']" />
                  </template>
                </a-button>
                <a-button type="text" size="small" @click="">
                  <template #icon>
                    <Icon icon="tabler:star-filled" :class="[item.star ? 'text-yellow-500' : '']" />
                  </template>
                </a-button>
              </template>
              <template #avatar>
                <a-avatar class="flex items-center justify-center">{{ item.name.slice(0, 1) }}</a-avatar>
              </template>
            </a-comment>
          </template>
        </div>
      </a-resize-box>
      <a-input-search
        v-model="data.msg"
        @search="handleSendMessage"
        :style="{ width: '24rem' }"
        placeholder="Please enter something"
        button-text="发送"
        search-button
      />
      <div class="mt-2">
        <a-button @click="$to('')">打开新页面</a-button>
      </div>
      <p class="text-red-500 mt-2">在新窗口打开本页面，发送消息，所有窗口都可以收到消息</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { cloneDeep, map } from 'lodash-es'
import { Random } from 'mockjs'

const messageBoxRef = ref()
const data = reactive({
  msg: '',
  name: Random.name(),
})
const messageList = ref<{ name: string; msg: string; star: boolean; heart: boolean }[]>([])

async function callBack({ command, message }: { command: string; message: any }) {
  messageList.value.push({
    ...message,
    star: false,
    heart: false,
  })
  await nextTick()
  messageBoxRef.value.scrollTop = messageBoxRef.value?.scrollHeight
}

const { send, isOpen } = useChannelMessage(callBack)

async function handleSendMessage() {
  const req = cloneDeep(data)
  send('', req)
  await callBack({ command: '', message: req })
  data.msg = ''
}
</script>
